<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/static/component/layui/css/layui.css" media="all">
    <th:block th:include="include :: header('充值表')"/>
</head>
<body>
<form class="layui-form" action=""  th:object="${Viplist}">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">

                <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">支付单号：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" id="pId" name="pId" autocomplete="off" class="layui-input">
                    </div>
                </div>

                   <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">支付时间：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" id="time" name="pTime" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                <label class="layui-form-label">收银员：</label>
                <div class="layui-input-block">
                    <input disabled="disabled" type="text" id="checker" name="oCashier" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">会员ID</label>
                <div class="layui-input-block">
                    <input disabled="disabled" type="text" th:value="*{id}" name="valueCardId" lay-verify="title" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">会员昵称</label>
                <div class="layui-input-block">
                    <input disabled="disabled" th:value="*{vipName}" type="text" name="vipName" autocomplete="off" placeholder="会员昵称" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">储值卡余额</label>
                <div class="layui-input-block">
                    <input disabled="disabled" th:value="*{valueCardBalance}" type="text" name="valueCardBalance" autocomplete="off" placeholder="储值卡余额" class="layui-input">
                </div>
            </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">充值套餐</label>
                    <div class="layui-input-block">     
                        <select name="sMeal" lay-verify="" id="package" lay-filter="package" >
                            <!-- <option th:value="*{hName}"></option> -->

                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">应付金额(元)：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" id="amount" type="text" name="amPayable" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">实付金额(元)：</label>
                    <div class="layui-input-block">
                        <input type="text" name="acPaid" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">支付方式：</label>
                    <div class="layui-input-block">
                        <select name="pMethod"  lay-verify="" >
                                <option value="现金支付">现金支付</option>
                                <option value="支付宝支付">支付宝支付</option>
                                <option value="微信支付">微信支付</option>
                                <option value="银行卡支付">银行卡支付</option>
                        </select>
                    </div>
                </div>


                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <input type="text" name="reMark" class="layui-input">                       
                    </div>
                </div> -->

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="viplist-update">
                <i class="layui-icon layui-icon-ok"></i>
                确认
            </button>

            <button id="cancel" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-close"></i>
                取消
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>

<script src="/static/component/layui/layui.js"></script>
<script>

    let package = new Array();//充值套餐
    let packageMoney = new Array();//存贮应付金额
    let packageList = new Array();//整个套餐列表
    let count=0;//实际充值金额
    let checker = 002;//固定当前收银员
    let packageName="";

    var tex2 = "";//随机生成支付ID
    for(var i = 1;i <= 6;i++){
        const num = Math.floor(Math.random()*10);
        tex2 += num;
    }

    // var tex = "";
    //  for(var i = 1;i <= 6;i++){
    //      const num = Math.floor(Math.random()*10);
    //      tex += num;
    //  }


    layui.use(['table','form','layer'], function(){
        let table = layui.table;
        var form = layui.form;
        var $ = layui.jquery, layer = layui.layer;
        // let MODULE_PATH = rootPath+"/OrderlistController";

        var time = getNowDate();//获取系统当前时间

        $(document).ready(function(){ //页面第一次加载获取

            //获取服务项目,计算应付金额
            $.ajax({
                url: rootPath+'/ValuecardsaleController/list',
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'get',
                success: function (result) {
                    if (result.code==0) {                       
                        packageList=result.data;
                        console.log(packageList);

                        console.log($(result.data).length);
                        let i = 0;
                        while (i < $(result.data).length) {
                            package.push(result.data[i].valueCardSaleName);
                            packageMoney.push(result.data[i].valueCardSalePrice);//套餐价格
                            i++;
                            
                        }
                        console.log("给下拉框赋值1")
                        var parknames = [];

                        //下拉矿默认值
                        var m = 0, len = $(package).length;
                        parknames.push('<option value="">请选择一个充值套餐</option>')
                        for (; m < len; m++) {
                            console.log("给下拉框赋值2")
                            //拼接成多个<option></option>
                            parknames.push('<option value="' + packageMoney[m] + '">' + package[m] + '</option>')                         
                        }
                         console.log(parknames);
                         $("#package").html(parknames.join(''));//充值套餐下拉选项更新
                        form.render();
                    } else {
                        window.location.reload()//刷新当前页面
                    }
                }

            });

            setTimeout(function (){
                    console.log("zhix");
                    // $("#payId").attr('value',tex);
                    // $("#amount").attr('value',kuang2);
                    $("#pId").attr('value',tex2);
                    $("#time").attr('value',time);
                    $("#checker").attr('value',checker);
                },300)



        })

        form.on('select(package)', function(data){
                var kuang2=data.value;
                console.log("打印套餐金额");
                console.log(kuang2);

                setTimeout(function (){//同步应付金额
                  
                    $("#amount").attr('value',kuang2);

                },300)
         });


        form.on('submit(viplist-update)', function (data) {
            var formData = data.field;
            console.log('表单对象：', formData); 
            console.log(formData.sMeal); 
            console.log(formData.valueCardId); //套餐实际增加金额 
            // console.log( $(packageList).length);

            
            let r = 0;
            while (r < $(packageList).length) {
                if(formData.sMeal==packageList[r].valueCardSalePrice){
                    count=packageList[r].valueCardSaleRealCount;
                    packageName=packageList[r].valueCardSaleName;
                    console.log(packageName); 
                    console.log(count);                   
                }
                r++;                           
            }

            formData.sMeal=packageName;
            console.log(formData.sMeal); 

            $.ajax({
                url: rootPath +'/MessOrderController/add',
                data: formData,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code==200) {
                            console.log("调用新写接口，余额增加");
                            let loading = layer.load();
                            $.ajax({
                                url:  rootPath +"/ViplistController/Recharge",
                                data:{
                                    id:formData.valueCardId,
                                    count:count
                                },
                                dataType: 'json',
                                contentType: 'application/x-www-form-urlencoded',
                                type: 'post',
                                success: function (result) {
                                    if (result.code==200) {
                                        layer.close(loading);
                                        layer.msg("充值成功！", {icon: 1, time: 1000}, function () {  
                                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                            parent.layui.table.reload("viplist-table");

                                        });      
                                    } else {
                                        console.log("调用新接口错误");
                                        layer.msg(result.msg, {icon: 2, time: 1000});
                                    }
                                }
                            })                          
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 5000});
                    }
                }
            })
            return false;
        });

        $(document).on('click',"#cancel",function(){
                console.log("关闭当前页");
                parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
        });


        //获取当前时间
        function getNowDate() {
            var date = new Date();
            var sign1 = "-";
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day  = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            if (month >= 1 && month <= 9) {
            month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
            day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
            }
            var currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds ;
            return currentdate;
        }
    });



</script>

</body>
</html>